<template>
	<view class="addaddress">
		<view class="top">
			<uni-icons class="back" type="back" size="30" @click="back()"></uni-icons>
			<view>添加地址</view>
		</view>
		<view class="add">
			<view class="name row">
				<view>联系人</view>
				<input type="text" v-model="username" placeholder="请填写姓名" placeholder-style="color:#CCCCCC;">
				<view v-for="(item, index) in allsex" :key="index" class="rowbtn">
					<view :class="[id == index ? 'active' : 'select']" @click="choseItem(index)">
						<text class="grid-text" >{{ item.sex }}</text>
					</view>
				</view>
			</view>
			<view class="phone row">
				<view>手机号码 </view>
				<input type="text" v-model="phone" placeholder="请填写手机号" placeholder-style="color:#CCCCCC;">
			</view>
			<view class="address row" @click="getAddress()">
				<view>送餐地址</view>
				<view>{{address}}</view>
				<uni-icons type="right" size="30" @click="toshppingAddress()"></uni-icons>
			</view>
			<view class="door row">
				<view>门牌号</view>
				<input type="text" v-model="doorNumber" placeholder="街道/楼牌号等" placeholder-style="color:#CCCCCC;">
			</view>
			<view class="tab row">
				<view>标签</view>
				<view class="tabbtn">
					<view v-for="(item, tindex) in tab" :key="tindex" class="tabrow">
						<view :class="[tid == tindex ? 'active' : 'select']" @click="tchoseItem(tindex)">
							<text class="grid-text" >{{ item.position }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button @click="keep()">保存</button>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				state:'0',
				allsex: [
					{
						isSelected: false,
						sex: '先生'
					},
					{
						isSelected: false,
						sex: '女士'
					}
				],
				id: '0', 
				tab:[
					{
						isSelected: false,
						position: '家'
					},
					{
						isSelected: false,
						position: '公司'
					},
					{
						isSelected: false,
						position: '学校'
					}
				],
				tid:'0',
				username:'',
				phone:'',
				address:'点击选择收货地址',
				doorNumber:'',
				addressStyle: '家',
				sex:'先生',
				userid:'1'
			}
		},
		methods: {
			back(){
				let pages = getCurrentPages();
				console.log(pages);
				let backPages = pages.length - 1;
				uni.navigateBack({
					delta:backPages,
				})
			},
			choseItem: function(index) {
				this.id = index;
				this.sex = this.allsex[index].sex;
				console.log(this.sex);
			},
			tchoseItem: function(tindex) {
				this.tid = tindex;
				this.addressStyle = this.tab[tindex].position;
				console.log(this.addressStyle);
			},
			toshppingAddress(){
				uni.navigateTo({
					url:"/pages/shioppingaddress/shioppingaddress?page=0"
				})
			},
			keep(){
				http({
					url:'/addaddress',
					params:{
						username:this.username,
						phone:this.phone,
						address:this.address,
						doorNumber:this.doorNumber,
						addressStyle:this.addressStyle,
						sex:this.sex,
						userid:this.userid
					},
					success:(res)=>{
						console.log(res);
						if(res.data.msg=='保存成功'){
							uni.showToast({title:res.data.msg,icon:'success'})
						}else{
							uni.showToast({title:res.data.msg,icon:'error'})
						}
					}
				})
			}	
		},
		// getAddress(){
		// 	let address = uni.getStorageSync('address');
		// 	console.log(address);
		// 	this.address = address;
		// }
		onLoad: function (option) {
			console.log(option.address);
			this.address = option.address;
		},
	}
</script>

<style>
page{
	background-color: #F2F2F2;
}
.top{
	padding-top: 60rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: center;
	font-size: 30rpx;
	background-color: #ffffff;
	border-bottom: #F2F2F2 solid 1rpx;
}
.top>.back{
	position: absolute;
	left: 0;
	zoom: 0.8;
}
.add .row{
	display: flex;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 25rpx;
	background-color: #ffffff;
	border-bottom: #F2F2F2 1rpx solid;
}
.add .row view:nth-child(1){
	margin-left: 30rpx;
}
.add .name view:nth-child(1){
	margin-right: 35rpx;
}
.add .row input{
	width: 240rpx;
	margin: 30rpx;
}
.add .address view:nth-child(1){
	margin-right: 30rpx;
}
.add .address view:nth-child(2){
	color: #CCCCCC;
}
.add .address uni-icons{
	position: absolute;
	right: 50rpx;
	zoom: 0.5;
}
.add .door view:nth-child(1){
	margin-right: 20rpx;
}
.add .tab .tabbtn{
	display: flex;
}
.btn{
	height: 130rpx;
	width: 100%;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
}
.btn button{
	width: 650rpx;
	background-color: #f77214;
	color: #ffffff;
	font-size: 30rpx;
	margin-top: 20rpx;
	border-radius: 50rpx;
}
.row .active {
	width: 120rpx;
	height: 60rpx;
	line-height: 66rpx;
	margin-top: 10rpx;
	border-radius: 50rpx;
	background-color: #fff0e9;
	border-width: 2rpx;
	border-style: solid;
	border-color: #fff0e9;
	color: #ff5c18;
	font-size: 25rpx;
}
.row .select {
	width: 120rpx;
	height: 60rpx;
	line-height: 66rpx;
	margin-top: 10rpx;
	border-radius: 50rpx;
	border-width: 2rpx;
	border-style: solid;
	border-color: #f0f3f7;
	color: #999999;
	background-color: #f0f3f7;
	font-size: 25rpx;
}
.rowbtn{
	width: 140rpx;
}
.rowbtn view text{
	margin-left: 35rpx;
}
.tabrow view {
	text-align: center;
}
.tabrow{
	width: 150rpx;
	padding-left: 10rpx;
}
</style>
